<template>
  <!-- 出入记录 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="人员姓名:">
              <a-input v-model.trim="pagination.personName" placeholder="请输入人员姓名"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="设备名称:">
              <a-spin :spinning="spinning" tip="加载中...">
                <a-select
                  :show-search="false"
                  placeholder="请选择设备名称"
                  @popupScroll="popupScroll"
                  @change="changeDevice"
                  optionFilterProp="children"
                  v-model="pagination.deviceId"
                  showSearch
                  :allow-clear="true"
                  :field-names="{ label: 'deviceName', value: 'deviceId' }"
                  :option="dataList">
                  <a-select-option v-for="(item, index) in dataList" :key="item.index" :value="item.deviceId">
                    {{ item.deviceName }}
                  </a-select-option>
                </a-select>
              </a-spin>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="是否查询未识别人员:">
              <a-radio-group v-model="pagination.unidentified" @change="radioChange">
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="人脸识别设备云ID">
              <a-input v-model.trim="pagination.facesluiceId" placeholder="请输入人脸识别设备云ID"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="operator">
              <a-input v-model.trim="pagination.type" placeholder="请输入operator"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="14" :sm="24">
            <a-form-item label="时间范围">
              <a-range-picker
                placement="bottomLeft"
                :disabled-date="disabledDate"
                v-model="BeginAndEnd"
                @calendarChange="calendarPriceRangeChange"
                @change="pickerChange"
                show-time />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-button type="primary" @click="onSearch">查询</a-button>
            <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
          </a-col>
          <!-- <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons"
                :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col> -->
        </a-row>
      </a-form>
    </div>
    <!-- <div class="filter-container">
        <template>
          <div>
            <a-button type="primary" @click="onAdd" icon="plus">
              新增设备
            </a-button>
          </div>
        </template>
      </div> -->
    <a-back-top />
    <!-- class="scroll-tabox" -->
    <div>
      <!-- :scroll="{ x: true }" -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :loading="loading"
        :rowKey="(record, index) => { return index }"
        :pagination="pagination"
        :scroll="{ x: 1300, y: 600 }">
        <template slot="picUrl" slot-scope="text,record">
          <img :src="record.picUrl" style="width: 100px;height: 100px;" @click="handlePreview(record.picUrl)" />
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img :src="previewImage" alt="example" style="width: 100%" />
          </a-modal>

        </template>
        <!-- <span slot="action" slot-scope="text, record">
              <a href="javascript:;" @click="onPersonFaces(record)">人脸管理</a>
            </span> -->
      </a-table>
    </div>

  </a-card>
  <!-- <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal> -->
</template>

<script>

import { Modal } from 'ant-design-vue'
import { getRecords, getDevices } from '@/api/clockingIn'
import moment from 'moment'
// import saveModal from './save'
export default {
  // components: {saveModal},
  data () {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      BeginAndEnd: [],
      selectPriceDate: '',
      columns: [
        {
          title: '设备ID',
          dataIndex: 'deviceId',
          key: 'deviceId',
          align: 'center',
          width: 100
        },
        {
          title: '人脸识别设备云ID',
          dataIndex: 'facesluiceId',
          key: 'facesluiceId',
          align: 'center',
          width: 100
        },
        {
          title: '图片路径',
          dataIndex: 'picUrl',
          key: 'picUrl',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'picUrl' }
        },
        {
          title: 'operator',
          dataIndex: 'type',
          key: 'type',
          align: 'center',
          width: 100
        },
        {
          title: '出入记录时间',
          dataIndex: 'recordTime',
          key: 'recordTime',
          align: 'center',
          width: 200
        },
        {
          title: '设备customer_id',
          dataIndex: 'deviceCustomerId',
          key: 'deviceCustomerId',
          align: 'center',
          width: 100
        },
        {
          title: '设备person_id',
          dataIndex: 'devicePersonId',
          key: 'devicePersonId',
          align: 'center',
          width: 100
        },
        {
          title: '设备person_name',
          dataIndex: 'devicePersonName',
          key: 'devicePersonName',
          align: 'center',
          width: 100
        },

        {
          title: '得分',
          dataIndex: 'score',
          key: 'score',
          align: 'center',
          width: 100
        }
        // {
        //   title: '操作',
        //   width: '150px',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 150,
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      dataSource: [],
      dialog: {
        save: false
      },
      loading: false,
      pagination: {
        // 分页配置
        pageSize: 20, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 10, // 总条数
        deviceId: undefined,
        personId: '',
        facesluiceId: '',
        personName: '',
        type: '',
        unidentified: '',
        beginDateTime: '',
        endDateTime: '',
        onChange: this.handlePageChange // 页码改变时的回调函数
      },

      dataList: [],
      pageNo: 1,
      max: false,
      spinning: false,
      searchWorld: '',
      total: 0,
      pageSize: 10,

      previewVisible: false,
      previewImage: ''
    }
  },
  mounted () { // 添加监听滚动条事件
    this.tableData()
    if (this.max) return
    this.loadDatas()
    // window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () { // 移除（跳转页面后移除）
    // window.removeEventListener('scroll', this.handleScroll, true)
  },

  methods: {
    handleScroll (e) {

      // content-box 为包裹表格的外层盒子
      // let heightTop = document.getElementsByClassName('ant-card')[0].scrollTop //距离顶部高度
      // if (heightTop >= 146) { //表头到达页面顶部固定表头
      //   // 146 为距离顶部多少时开始吸顶，即吸顶距离
      //   let top = heightTop - 146
      //   document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '9999'
      //   document.getElementsByClassName('el-table__header-wrapper')[0].style.top = `${top}px`
      //   // 有固定列时，改变固定列的top
      //   let fixedWrapper = document.getElementsByClassName('el-table__fixed-header-wrapper')
      //   for (let i in fixedWrapper) {
      //     document.getElementsByClassName('el-table__fixed-header-wrapper')[i].style.top = `${top}px`
      //     document.getElementsByClassName('el-table__fixed-header-wrapper')[i].style.zIndex = '9999'
      //   }

      // } else {
      //   document.getElementsByClassName('el-table__header-wrapper')[0].style.top = ''
      //   document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = ''

      //   let fixedWrapper = document.getElementsByClassName('el-table__fixed-header-wrapper')
      //   for (let i in fixedWrapper) {
      //     document.getElementsByClassName('el-table__fixed-header-wrapper')[i].style.top = ''
      //     document.getElementsByClassName('el-table__fixed-header-wrapper')[i].style.zIndex = '3'
      //   }
      // }
    },
    handlePreview (src) {
      this.previewImage = src
      this.previewVisible = true
    },
    handleCancel () {
      this.previewVisible = false
    },
    loadDatas () {
      this.pageNo = 1
      var param = {
        current: this.pageNo,
        pageSize: this.pageSize,
        deviceName: this.searchWorld, //	设备名称
        brand: '', //	品牌
        deviceIdentifier: '', //	设备生产Identifier
        manufacturer: ''//	制造商
      }
      getDevices(param).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.dataList = res.data.datas
          this.total = res.data.total
        }
      })
    },
    // 滚动条滚动监听方法
    async popupScroll (e) {
      const that = this
      const { target } = e
      const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
      const clientHeight = target.clientHeight // 滑动最低高度
      // 当下拉框滚动条到达底部的时候
      if (!this.max && scrollHeight < clientHeight + 2) {
        this.spinning = true
        // 数据起始条数
        this.pageNo++
        var newList = []
        var param = {
          current: this.pageNo,
          pageSize: this.pageSize,
          deviceName: this.searchWorld, //	设备名称
          brand: '', //	品牌
          deviceIdentifier: '', //	设备生产Identifier
          manufacturer: ''//	制造商
        }
        await getDevices(param).then((res) => {
          if (res.code == 200) {
            newList = res.data.datas
            that.total = res.data.total
            if (newList.length == 0) {
              that.max = true
            }
          }
        })
        if (that.total != this.dataList.length) {
          // 数据追加
          this.dataList = this.dataList.concat(newList)
        }
        this.spinning = false
      }
    },
    changeDevice (val) {
      console.log(val)
    },
    // 下拉框搜索方法
    onSearch (val) {
      if (val.length != 0) {
        this.searchWorld = val
        this.dataList = []
        this.max = false
        this.loadDatas()
      } else {
        this.searchWorld = undefined
        this.dataList = []
        this.max = false
        this.loadDatas()
      }
    },

    radioChange (e) {
      const { value } = e.target
      this.pagination.unidentified = value
    },
    // 高级搜索切换
    toggleAdvanced () {
      this.advanced = !this.advanced
    },

    // 搜索
    onSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 20

      this.tableData()
    },
    // 重置
    onReset () {
      this.selectPriceDate = ''
      this.BeginAndEnd = []
      this.pagination = {
        // 分页配置
        pageSize: 20, // 每页显示的条数
        current: 1, // 当前页数
        total: 10, // 总条数
        deviceId: undefined,
        personId: '',
        facesluiceId: '',
        personName: '',
        type: '',
        unidentified: '',
        beginDateTime: '',
        endDateTime: ''
      }
      this.tableData()
    },
    handlePageChange (page, pageSize) {
      this.pagination.current = page
      this.tableData()
    },
    // 新增人脸
    onPersonFaces (row) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveModal.open(row)
      })
    },

    tableData () {
      this.loading = true
      const par = {
        ...this.pagination
      }
      par.deviceId = par.deviceId == undefined ? '' : par.deviceId
      getRecords(par).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.dataSource = res.data.datas
          this.pagination.total = res.data.total
        }
        this.loading = false
      })
    },
    // 时间范围
    pickerChange (val) {
      this.selectPriceDate = ''
      const valueTime = val.map(item => {
        return moment(item).format('YYYY-MM-DD HH:mm:ss')
      })
      this.pagination.beginDateTime = valueTime[0]
      this.pagination.endDateTime = valueTime[1]
    },

    // 选择开始时间/结束时间
    calendarPriceRangeChange (date) {
      this.selectPriceDate = date[0]
    },
    // 根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate (current) {
      if (this.selectPriceDate) {
        const selectV = moment(this.selectPriceDate, 'YYYY-MM-DD HH:mm:ss').valueOf()
        return current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD HH:mm:ss') || current > moment().endOf('day') || current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')
      } else {
        return current && current > moment().endOf('day')
      }
    }
    // onDel(row) {
    //   let _this = this
    //   Modal.confirm({
    //     title: '删除信息',
    //     content: '确定要删除吗？',
    //     onOk: () => {
    //       deleteTenants(row.tenantId).then(res => {
    //         if (res.code == 200) {
    //           _this.tableData()
    //           _this.$message.success("删除成功")
    //         } else {
    //           _this.$message.error(res.message)
    //         }
    //       })
    //     },
    //   });
    // }
  }
}
</script>

<style scoped lang="less" >
.scroll-tabox {
  position: relative;
  height: 500px;

  /deep/ .ant-table-thead {
    position: sticky;
    top: 0px;
    z-index: 9999;
    background: #fff;
  }
}

// .vTable {
//   height: 500px;
//   overflow-y: auto;
//   overflow-x: hidden;
// }

.send-display-container {
  width: 100%;
  background-color: #ffffff;
  padding: 24px;
}

.filter-container {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  justify-content: left;

  .label {
    padding-right: 20px;

    white-space: nowrap;
  }

  .input-container {
    width: 300px;
    margin-right: 20px
  }

  .btn {
    margin-right: 20px;
  }
}

/deep/ .ant-modal {
  min-width: 700px;
  margin-left: 30%;
}
</style>
